<template>
  <div style="font-size:0.4rem;">
    <div style="padding-top:4.2rem;padding-bottom:2.5rem;">
      <TopBanner/>
      <Notice/>
      <nut-row style="margin-top:0.3rem;" type="flex" gutter="10" align="center">
        <nut-col :span="24">
          <dl>
            <dt>{{ $t('HomePage.syfsssj') }}</dt>
            <dd>
              <div class="report">
                <div class="d"><p>{{ $t('HomePage.kyyey') }}（￥）</p>
                ￥{{stat.balance?stat.balance:0}}
              </div> <div class="d"><p>{{ $t('HomePage.zrsy') }}</p>
                +{{stat.yesterday?stat.yesterday:0}}
              </div> <div class="d"><p>{{ $t('HomePage.jrsy') }}</p>
                {{stat.today?stat.today:0}}{{$t('HomePage.y')}}
              </div>
                <div class="d"><p>{{ $t('HomePage.bzsy') }}</p>
                  ￥{{stat.week?stat.week:0}}
                </div> <div class="d"><p>{{ $t('HomePage.bysy') }}</p>
                +{{stat.month?stat.month:0}}
              </div> <div class="d"><p>{{ $t('HomePage.sysy') }}</p>
                {{stat.last_month?stat.last_month:0}}{{$t('HomePage.y')}}
              </div>
                <div class="d"><p>{{ $t('HomePage.zsy') }}</p>
                {{stat.total?stat.total:0}}{{$t('HomePage.y')}}
              </div> <div class="d"><p>{{ $t('HomePage.jtyzrw') }}</p>
                {{stat.todayUsedCnt>0?stat.todayUsedCnt:0}}{{$t('HomePage.y')}}
              </div> <div class="d"><p>{{ $t('HomePage.jrsycs') }}</p>
                {{stat.todayRemainCnt?stat.todayRemainCnt:0}}{{$t('HomePage.y')}}
              </div><div class="line line1"></div>
                <div class="line line2"></div>
              </div>
            </dd>
          </dl>
        </nut-col>
      </nut-row>
      <nut-row style="margin:0.3rem 0;" type="flex" gutter="0" align="center">
        <nut-col :span="24">
          <dl>
            <dt>{{ $t('HomePage.rwdt') }}</dt>
            <dd style="padding: 0;">
              <div class="announcement-task flexS">
                <div @click="handleClickGoTask(3)" class="a-t-items">
                  <div class="a-t-title"></div>
                  <div class="a-t-t-1-1 flexS">
                    <div class="a-t-t-1-1-text">{{ $t('HomePage.qthy') }}</div></div>
                  <div class="a-t-text">
                    <div class="a-t-t-1">
                      {{ $t('HomePage.dy') }}
                    </div>
                    <div class="a-t-t-2">{{ $t('HomePage.dzgzpl') }}</div>
                    <div class="a-t-t-3">
                      <div class="a-t-t-3-1" style="display: none;">
                        <img src="/static/img/lock.png" alt="">
                        <div class="a-t-t-3-text">{{ $t('HomePage.djs') }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div @click="handleClickGoTask(1)" class="a-t-items">
                  <div class="a-t-title"></div>
                  <div class="a-t-t-1-1 flexS">
                    <div class="a-t-t-1-1-text">{{ $t('HomePage.qthy') }}</div></div>
                  <div class="a-t-text">
                    <div class="a-t-t-1">
                      {{ $t('HomePage.wx') }}
                    </div>
                    <div class="a-t-t-2">{{ $t('HomePage.fpyq') }}</div>
                    <div class="a-t-t-3">
                      <div class="a-t-t-3-1" style="display: none;">
                        <img src="/static/img/lock.png" alt="">
                        <div class="a-t-t-3-text">{{ $t('HomePage.djs') }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="a-t-items">
                  <div class="a-t-title"></div>
                  <div class="a-t-t-1-1 flexS">
                    <div class="a-t-t-1-1-text">{{ $t('HomePage.qthy') }}</div></div>
                  <div class="a-t-text">
                    <div class="a-t-t-1">
                      {{ $t('HomePage.dx') }}
                    </div>
                    <div class="a-t-t-2">{{ $t('HomePage.fdx') }}</div>
                    <div class="a-t-t-3">
                      <div class="a-t-t-3-1">
                        <img src="/static/img/lock.png" alt="">
                        <div class="a-t-t-3-text">{{ $t('HomePage.djs') }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div @click="handleClickGoTask(2)" class="a-t-items">
                  <div class="a-t-title"></div>
                  <div class="a-t-t-1-1 flexS">
                    <div class="a-t-t-1-1-text">{{ $t('HomePage.qthy') }}</div></div>
                  <div class="a-t-text">
                    <div class="a-t-t-1">
                      {{ $t('HomePage.qsrw') }}
                    </div>
                    <div class="a-t-t-2">{{ $t('HomePage.xzzsj') }}APP</div>
                    <div class="a-t-t-3">
                      <div class="a-t-t-3-1" style="display: none;">
                        <img src="/static/img/lock.png" alt="">
                        <div class="a-t-t-3-text">{{ $t('HomePage.djs') }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </dd>
          </dl>
        </nut-col>
      </nut-row>
      <nut-row style="margin:0.3rem 0;" type="flex" gutter="10" align="center">
        <nut-col :span="24">
          <dl>
            <dt>{{ $t('HomePage.hybd') }}</dt>
            <dd>
              <div class="hot_rob_list">
                <ul class="hot_rob_ul">
                  <li v-for="item in memberList">
                    <div><img :src="item.headphoto" alt=""></div>
                    <div class="hot_rob_ul_con"><h3>{{ $t('HomePage.gx') }}:{{item.username}}</h3> <h4
                    > {{ $t('HomePage.jrywc') }}{{item.count}}{{ $t('HomePage.dhd') }} </h4> <a href=""><img src="/static/icons/coin.png" alt="">{{(item.count*dmoney).toFixed(2)}}</a></div>
                  </li>
                </ul>
              </div>
            </dd>
          </dl>
        </nut-col>
      </nut-row>
      <nut-popup :overlay="false" position="bottom" closeable close-icon="cross" v-model="showHelpDetail" :style="{ height: '100%' }">
        <div style="padding:1rem;text-align: left" v-html="curr_html">
        </div>
      </nut-popup>
    </div>
    <NoticeAlert/>
    <MainNav nav_index="0"/>
  </div>
</template>

<script>
import MainNav from "../components/MainNav";
import Notice from "../components/Notice";
import TopBanner from "../components/TopBanner";
import NoticeAlert from "../components/NoticeAlert";

export default {
  name: 'HomePage',
    components: {
        TopBanner,
      MainNav,
      Notice,
      NoticeAlert
    },
    data () {
    return {
      user:{},
      stat:{},
      loadingHelp: true,
      help_list:[],
      curr_html:'',
      showHelpDetail:false,
      logined:false,
      dmoney:1.8,
      report:{
          totalMoney:0,
          yesterdayMoney:0,
          todayGetMoney:0,
          freezeMoney: 0,
          todayUsedCnt: 0,
          todayRemainCnt: 0,

      },
        memberList:[
            {
                username:'133****1234',
                count:'29',
                money: '52.2',
                headphoto:'/static/img/headphoto/1.1.jpg'
            },
            {
                username:'135****6221',
                count:'32',
                money: '57.6',
                headphoto:'/static/img/headphoto/1.2.jpg'
            },
            {
                username:'150****8721',
                count:'30',
                money: '54',
                headphoto:'/static/img/headphoto/1.4.jpg'
            },
            {
                username:'150****1829',
                count:'30',
                money: '54',
                headphoto:'/static/img/headphoto/1.5.jpg'
            },
            {
                username:'151****3921',
                count:'18',
                money: '32.4',
                headphoto:'/static/img/headphoto/1.6.jpg'
            },
            {
                username:'152****0031',
                count:'10',
                money: '18',
                headphoto:'/static/img/headphoto/1.2.jpg'
            },
            {
                username:'186****8021',
                count:'11',
                money: '19.8',
                headphoto:'/static/img/headphoto/1.7.jpg'
            },
            {
                username:'133****8272',
                count:'13',
                money: '23.4',
                headphoto:'/static/img/headphoto/2.0.jpg'
            },
            {
                username:'188****1630',
                count:'10',
                money: '18',
                headphoto:'/static/img/headphoto/2.3.jpg'
            },
        ]
    }
  },
    methods:{
      getData(){
          let loading = this.$toast.loading();
          this.$axios.get(this.$api_url.user).then((res)=>{
              console.log(res);
              this.user = res.data;
              if(this.user){
                  this.logined = true;
              }
          }).catch((err)=>{
              this.$toast.fail(err.message);
          }).then(()=>{
              loading.hide();
          })
      },
      getStat(){
          this.$axios.get(this.$api_url.get_stat_incomes).then((res)=>{
              console.log(res);
              this.stat = res.data;
          })
      },
      getIncomesRanking(){
          this.$axios.get(this.$api_url.get_incomes_ranking).then((res)=>{
              for(let i = 0; i < res.data.length; i++){
                  if(!res.data[i].headphoto){
                      res.data[i].headphoto = '/static/img/headphoto/1.6.jpg';
                  }

                  this.memberList.push({
                      username:res.data[i].username,
                      count:res.data[i].count,
                      money: res.data[i].money,
                      headphoto:res.data[i].headphoto
                  })
              }
              if(res.data[0]['dmoney']){
                this.dmoney = res.data[0]['dmoney']
              }
              
          })
      },
      handleClickGoTask(index){
          switch(index){
              case 1:
                  location.href="/#/task?type=0";
                  break;
              case 2:
                  location.href="/#/task?type=5";
                  break;
              case 3:
                  location.href="/#/task?type=1";
                  break;
          }
      },
      checkDevInfo(){
        let his = localStorage.getItem("xxx_dev_info")
        if(his){
            return true;
        }
        return false
      },
      Meiqia(meiqianID){
          (function(m, ei, q, i, a, j, s) {
                m[i] = m[i] || function() {
                    (m[i].a = m[i].a || []).push(arguments)
                };
                j = ei.createElement(q),
                    s = ei.getElementsByTagName(q)[0];
                j.async = true;
                j.charset = 'UTF-8';
                j.src = 'https://static.meiqia.com/dist/meiqia.js?_=t';
                s.parentNode.insertBefore(j, s);
            })(window, document, 'script', '_MEIQIA');
            _MEIQIA('entId', meiqianID);
      },
      initServer(){
        this.$axios.get(this.$api_url.get_meiqia).then((res)=>{
            if(res.data){
              this.Meiqia(res.data) 
            }
        })
      },
        startTimer(){
          setInterval(()=>{
              let arr = [];
              arr.push(this.memberList.pop());
              arr.push(this.memberList.pop());
              this.memberList.unshift(arr.pop());
              this.memberList.unshift(arr.pop());
          },2500);
        },
    },
    mounted() {
      this.initServer();
        this.startTimer();
        setTimeout(()=>{
            this.getData();
            this.getStat();
        },1000);
        setTimeout(()=>{
            this.getIncomesRanking();
        },2000);
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .type-item{
    height:5rem;
    line-height:5rem;
    border:thin solid #ccc;
    margin-bottom:1rem;
  }
  dl{
    text-align: left;
    background-color: #fff;
    border-radius: 0 0 0.3rem 0.3rem;
  }
  dl dt{
    color: #333;
    padding: 0.3rem;
    background: url(/static/img/profile-bg.png);
    background-size: 100%;
  }
  dl dd{
    padding:0.2rem;
    border-bottom:thin dashed #eee;
  }
  .pull-right{
    float:right;
  }
  .report{
    font-size: .48rem;
    background: #fff;
    box-shadow: 0 0.426667rem 0.64rem -0.32rem hsla(202,4%,44%,.16);
    border-radius: .213333rem;
    position: relative;
    height: 5.266667rem;
  }
  .report div{
    width: 33.333333%;
    height: 1.706667rem;
    float: left;
    text-align: left;
    padding: .266667rem;
  }
  .report .lf{
    text-align: left;
  }
  .report p{
    font-size: .266667rem;
    color: #9c9c9c;
  }
  .red{
    color: #ff575c;
  }
  .report .d{
    font-size: .426667rem;
    color: #ff575c;
  }
  .report .d p{
    font-size: .266667rem;
    color: #000;
  }
  .report .line{
    position: absolute;
    width: .023333rem;
    top: 10%;
    transform: translateX(-50%);
    height: 4rem;
    background: #434343;
    opacity: .1;
    padding: 0;
  }
  .report .line1{
    left: 33.3333%;
  }
  .report .line2{
    right: 33.3333%;
  }

  .hot_rob_list{
    overflow-x: auto;
    width: 100%;
  }
  .hot_rob_ul{
    display: -ms-flexbox;
    display: flex;
    padding: .24rem 0;
  }
  .hot_rob_ul li{
    display: inline-block;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 4.313333rem;
    height: 4.613333rem;
    border-radius: .053333rem;
    background: #f7f7f7;
    margin-left: .4rem;
    box-sizing: border-box;
    padding: .64rem .4rem 0 .56rem;
    text-align: center;
  }
  .hot_rob_ul li:first-child{
    margin-left:0;
  }
  .hot_rob_ul li img{
    width: 1.333333rem;
    height: 1.333333rem;
    margin-right: .24rem;
    border-radius: 50%;
  }
  .hot_rob_ul_con{
    -ms-flex: 1;
    flex: 1;
  }
  .hot_rob_ul_con h3{
    font-size: .4rem;
    line-height: .64rem;
    color: #333;
  }
  .hot_rob_ul_con h4{
    font-size: .32rem;
    line-height: .56rem;
    color: #999;
    margin-bottom: .133333rem;
  }
  .hot_rob_ul_con a{
    font-size: .426667rem;
    color: #222;
    text-align: center;
    border-radius: .4rem;
    padding: .066667rem .266667rem .066667rem .066667rem;
    background: #fae64f;
  }
  .hot_rob_ul_con a img{
    height: .533333rem;
    width: .533333rem;
    margin-top: -.133333rem;
  }

  .flexS{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
  }
  .announcement-task{
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .a-t-items{
    position: relative;
    height: 5.333333rem;
    margin: .32rem .16rem;
  }
  .announcement-task>div{
    width: 4.333333rem;
    background: hsla(180,4%,95%,.6);
    height: 2.533333rem;
  }
  .announcement-task>div:first-child {
    background-image: url(/static/img/task_bg1.png);
    background-size: 100% 100%;
    color: #333;
  }
  .announcement-task>div:nth-child(2) {
    background-image: url(/static/img/task_bg2.png);
    background-size: 100% 100%;
    color: #333;
  }
  .announcement-task>div:nth-child(3) {
    background-image: url(/static/img/task_bg3.png);
    background-size: 100% 100%;
    color: #333;
  }
  .announcement-task>div:nth-child(4) {
    background-image: url(/static/img/task_bg4.png);
    background-size: 100% 100%;
    color: #333;
  }
  .a-t-bg{
    position: absolute;
    top: 0;
    left: 0;
    text-align: right;
    height: 1.333333rem;
  }
  .a-t-bg img{
    width: 1.333333rem;
    height: auto;
  }
  .a-t-title{
    position: absolute;
    top: .88rem;
    left: .2rem;
  }
  .a-t-t-1-1{
    text-align: right;
    width: 2.133333rem;
    height: .493333rem;
    color: #fff;
    font-size: .32rem;
    background: linear-gradient(270deg,#ffcc2c,#ff9a2c);
    line-height: .666667rem;
    border-radius: .2rem;
    float: left;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .a-t-t-1-1-text{
    font-size: .24rem;
    text-align: center;
  }
  .a-t-text{
    position: absolute;
    z-index: 2;
    left: .4rem;
    top: 1rem;
  }
  .a-t-t-1{
    font-size: .48rem;
    font-weight: 600;
  }
  .a-t-t-2{
    color: #000;
    font-size: .32rem;
    margin-top: .053333rem;
  }
  .a-t-t-1-1>img{
    width: .237rem;
    margin-left: .08rem;
  }
  .a-t-t-3-1{
    position: absolute;
    top: 0;
    left: 2.666667rem;
    background: rgba(0,0,0,.6);
    width: 1.266667rem;
    height: 1.266667rem;
    border-radius: .133333rem;
  }
  .a-t-t-3-1>img{
    width: .533333rem;
    display: block;
    margin: .106667rem auto .133333rem;
    height: .533333rem;
  }
  .a-t-t-3-text{
    color: #fff;
    text-align: center;
    font-size: .373333rem;
  }


  #xuanzhun{
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    -webkit-animation: rotate 3s linear infinite;
    -moz-animation: rotate 3s linear infinite;
    -o-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
  }
  @-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
    to{-webkit-transform: rotate(360deg)}
  }
  @-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
    to{-moz-transform: rotate(359deg)}
  }
  @-o-keyframes rotate{from{-o-transform: rotate(0deg)}
    to{-o-transform: rotate(359deg)}
  }
  @keyframes rotate{from{transform: rotate(0deg)}
    to{transform: rotate(359deg)}
  }
</style>
